<template>
  <div class="inspection-container">
    <div class="inspection-container-r">
      <div class="inspection-container-title">
        <h3 class="childpage-title">巡检任务完成时间线</h3>
        <span>不合格</span>
        <span>合格</span>
      </div>
      <div class="progress-container">
        <ul class="progress-items">
          <li
            class="progress-item"
            v-for="(item,index) in timeItems"
            :class="[item.pointResult==1?'item-progrossing':(item.pointResult==2?'item-progrosselse':'')]"
            :key="index"
          >
            <div class="item-l">
              <span class="item-time-before">{{item.createTime?item.createTime.substring(5,10):''}}</span>
            </div>
            <div class="progress-item-inner item-r">
              <div class="progress-item-inner-r">
                <span class="item-time-after">{{item.createTime?item.createTime.substring(11,16):''}}</span>
                <div class="item-text">{{item.description}}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { getInspectTimeLine } from '@/api/inspection'
export default {
  name: 'Inspection',
  data() {
    return {
      ilinkBs_inspectionId: '',
      timeItems: [],
      inspectionId: '',
    }
  },
  created() {
    let that = this
    /*
     * 改变右侧展示模块方法
     */
    window.FunList.changeRightModel_InspectionRight = that.changeModel
  },
  methods: {
    changeModel(parames) {
      if (parames != undefined) {
        this.inspectionId = parames.inspectionId
      }
      this.getInspectTimeLine()
    },
    getInspectTimeLine() {
      getInspectTimeLine({
        taskId: this.inspectionId,
      }).then((res) => {
        this.$Ctl.loading(1, 10000)
        if (res.status == 200) {
          let arr = []
          if (res.data.status == 2) {
            arr.push({
              createTime: res.data.endTime,
              description: '巡检任务结束',
            })
          }
          arr = arr.concat(res.data.timeAxis)
          arr.push({
            createTime: res.data.startTime,
            description: '巡检任务生成',
          })
          this.timeItems = arr
          this.$Ctl.loading(0)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.inspection-container {
  height: 100%;
  .inspection-container-r {
    height: 100%;
    .inspection-container-title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 30px;
      margin-top: 10px;
      span {
        color: #ffffff;
        font-size: 16px;
        position: relative;
        padding-left: 10px;
        margin-left: 20px;
        &:nth-child(2) {
          &::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #db3b58;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        &:nth-child(3) {
          &::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #55c693;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }

    .progress-container {
      height: 100%;
      padding-bottom: 20px;
      font-size: 16px;
      .progress-items {
        overflow: auto;
        height: 100%;
        padding-bottom: 60px;
        color: #fff;
        .progress-item.item-progrossing {
          &::before {
            background: #55c693;
          }
        }
        .progress-item.item-progrosselse {
          &::before {
            background: #db3b58;
          }
        }
        .progress-item {
          &:after {
            content: '.';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
          }
          position: relative;

          margin-bottom: 20px;
          .item-l {
            width: 80px;
            span {
              display: block;
              height: 20px;
            }
          }
          .item-l,
          .item-r {
            float: left;
            height: 100%;
          }

          &:last-child {
            .item-text {
              &::before {
                display: none;
              }
            }
          }
          .item-text {
            flex: 1;
            margin-left: 20px;
            &::before {
              content: '';
              display: block;
              border: 1px solid rgba(187, 231, 255, 0.5);
              width: 1px;
              height: 100%;
              position: absolute;
              left: -19px;
              top: 17px;
            }
          }
          &::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            position: absolute;
            left: 60px;
            top: 6px;
            background: #5eb8f7;
          }

          .progress-item-inner {
            width: calc(100% - 100px);
            .item-time-before {
              padding: 0 20px;
            }
            .progress-item-inner-r {
              position: relative;
              flex: 1;
              display: flex;
              align-items: baseline;
              justify-content: flex-start;
              flex-wrap: wrap;
              .item-time-after {
                color: #a3bedd;
                width: 40px;
                height: 20px;
              }
            }
          }
        }
      }
    }
  }
}
</style>